<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <div>
          <!-- flightsFilter组件 -->
          <!-- <FlightsFilter :fdata="filtersData" />  -->
          <!-- 只上面这行，会出现报错 Cannot read property 'departCity' of undefined；因为子组件的数据还没准备好 -->
          <!-- 加判断；等数据加载完成，才正式引用这个子组件 -->
          <FlightsFilter v-if="filtersData.info" :fdata="filtersData" @filterData="setFilterData" />
        </div>

        <!-- 航班头部布局 -->
        <div>
          <FlightsListHead />
        </div>

        <!-- 航班信息 -->
        <div>
          <!-- 多个，遍历结构，并且传值给 封装的列表组件 -->
          <FlightsItem v-for="(item,index) in dataList" :key="index" :flightsData="item" />
          <div class="tips" v-if="isShow">没有查询到相关数据</div>
        </div>
        <!-- 底部分页结构 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="flightList.length"
        ></el-pagination>
        <!--总页数 一开始是res.data.total  筛选时记得改为flightList.length 才正确-->
      </div>
      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 侧边栏组件 -->
        <FlightAside />
      </div>
    </el-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
      // 所有机票数据 --源数据 100 > 10,这只是我们进行业务处理时的参照数据，我们在进行分页的时候会从这个数组中获取数据，但是永远不会修改这个数组
      flightList: [],       //所有航班信息--不会修改这个数组
      dataList: [],         // 定义一个新数组存放当前页的数据，这才是当前页的列表数据，渲染数据改为遍历这个
      total: 0,             //总页数
      pageSize: 5,           //每页显示记录数  
      pageIndex: 1,          //当前页码
      filtersData: {},         //筛选组件的数据,对象结构 
      isShow: false
    }
  },
  mounted() {
    // console.log(this.$route.params)    //{}
    // console.log('-----------------')
    // console.log(this.$route.query)     //查看搜索 是否传递了参数过来

    // 发请求，获取机票列表 http:127.0.0.1:1337/airs---封装起来，watch中 点击历史查询要调用
    this.getdata()       //下面代码块的封装
    // this.$axios({
    //   url: '/airs',
    //   params: this.$route.query
    // }).then(res => {
    //   console.log(res);
    //   this.flightList = res.data.flights
    //   // this.total = res.data.total   //总页数---
    //   this.filtersData = { info: res.data.info, options: res.data.options, flights: res.data.flights }   //筛选组件的数据--只要info和options
    //   // 添加flights数组，因为进行筛选时，渲染列表需要机票信息
    //   console.log('筛选组件的数据', this.filtersData);
    //   // 调用  获取当前页数据的 函数
    //   this.getPageData()
    // })
  },
  watch: {
    $route() {
      // 监听路由参数的变化，并且实时更新数据 【点击历史查询操作】
      this.getdata()    //调用封装的获取机票列表的数据请求
    }
  },
  methods: {
    // 封装 获取机票列表的数据
    getdata() {
      // 发请求，获取机票列表 http:127.0.0.1:1337/airs---封装起来，watch中 点击历史查询要调用
      this.$axios({
        url: '/airs',
        params: this.$route.query
      }).then(res => {
        console.log(res);
        this.flightList = res.data.flights
        // this.total = res.data.total   //总页数---
        this.filtersData = { info: res.data.info, options: res.data.options, flights: res.data.flights }   //筛选组件的数据--只要info和options
        // 添加flights数组，因为进行筛选时，渲染列表需要机票信息
        console.log('筛选组件的数据', this.filtersData);

        // 调用  获取当前页数据的 函数
        this.getPageData()
      })
    },

    //获取当前页的数据
    getPageData() {
      // 我们需要从flightList: [] 数组中截取某些数据？
      // this.dataList = this.flightList.splice(0, this.pageSize)                //第一页的数据
      // this.dataList = this.flightList.splice(this.pageSize * 1, this.pageSize)    //第二页的数据
      // this.dataList = this.flightList.splice(this.pageSize * 2, this.pageSize)   //第三页的数据
      //得出规律
      // this.dataList = this.flightList.splice(this.pageSize * (this.pageIndex - 1), this.pageSize)
      // console.log(this.flightList.length)  //数据源被 修改为95条；这样子会使数据丢失
      // 🚩🚩细节：splice会改变源数组，在splice之后，数据会减少，对业务有害,所以你可以考虑先将数组的成员复制一份再进行处理，这样就不会改变原数组
      // 方案一：
      // this.dataList = [...this.flightList].splice(this.pageSize * (this.pageIndex - 1), this.pageSize)
      // console.log(this.flightList.length)  //100
      // 方案二：
      // splice(起始索引，数量)
      // slice(起始索引，结束索引)：包含起始索引位置的元素，但是不包含结束索引位置的元素,它不会改变源数组
      // this.dataList = this.flightList.slice(0, this.pageSize)  //1
      // this.dataList = this.flightList.slice(5, this.pageSize * 2)  //2
      // this.dataList = this.flightList.slice(10, this.pageSize * 3)  //3
      // 得出规律
      this.dataList = this.flightList.slice(this.pageSize * (this.pageIndex - 1), this.pageSize * this.pageIndex)
      // console.log(this.flightList.length)
    },

    // 调整每页记录数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      // 调用  获取当前页数据的 函数
      this.getPageData()
    },

    // 调整当前显示页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageIndex = val;
      // 调用  获取当前页数据的 函数
      this.getPageData()
    },

    //渲染flightsFliter 筛选(过滤)过后的 机票列表
    setFilterData(arr) {
      if (arr.length > 0) {
        this.pageIndex = 1
        this.flightList = arr
      } else {
        // 没有数据给相关提示
        this.flightList = arr
        this.isShow = true;
        this.$message.info('没有查询到相关数据')
      }
      // 依然要获取当前页的数据
      this.getPageData()
    }
  }
}
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
.tips {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 50px;
}
</style>